<template>
	<view class="appeal">
		<!-- 申诉结果 -->
		<view class="appeal-result">
			<view class="result" :status="statusArr[itemData.appealStatus].type">
				{{statusArr[itemData.appealStatus].text}}
			</view>
			<view class="label">申诉结果</view>
			<view class="flex-item">
				<view class="title">申诉审核意见</view>
				<view class="desc">
					{{itemData.auditStatement}}
				</view>
			</view>
		</view>
		<!-- 申诉详情 -->
		<view class="appeal-box">
			<view class="label">申诉信息</view>
			<view class="appeal-flex" v-for="(col,index) in options[itemData.itemCode]">
				<view class="name">{{col.label}}</view>
				<view class="text">{{col.format?col.format(itemData):itemData[col.prop]}}</view>
			</view>
			<view class="appeal-flex">
				<view class="name">申诉描述</view>
				<view class="text">{{itemData.appealDesc}}</view>
			</view>
			<view class="appeal-flex">
				<view class="name">附件</view>
			</view>
			<view class="appeal-flex">
				<view class="file-list clearfix">
					<view class="file-item" v-for="(item,index) in itemData.files">
						<!-- <image class="file-img" :src="billPdfPath+item.url" mode="aspectFit"></image> -->
						<!-- 数据库存储完整路径，不需要加前缀 -->
						<image class="file-img" :src="item.url" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<div class="appeal-btn" @click="$goBack(1,1)">返回</div>
		</view>
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/common/util.js"
	export default {
		data() {
			return {
				statusArr: [{
					type: 2,
					text: '未处理'
				}, {
					type: 3,
					text: '申诉成功'
				}, {
					type: 1,
					text: '申诉失败'
				}],
				itemData: {
					appealStatus: 0,
					files: [],
					occurAddr: "",
					publishTime: "",
					itemName: "",
					vehCode: "",
					appealDesc: "",
					auditStatement: "",
				},
				options: {
					pljs: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生地点',
						prop: 'occurAddr',
					}, {
						label: '发生时间',
						prop: 'evalTime',
					}],
					ybcs: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '超速地点',
						prop: 'occurAddr',
					}, {
						label: '超速时间',
						prop: 'evalTime',
					}],
					ydztczbgf: [{
						label: '运单号',
						prop: 'billNo',
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '描述',
						prop: 'description'
					}],
					jjwfsjkf: [{
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
					yzcf: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
				},

			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			},
			billPdfPath() {
				return this.$store.getters.getBillPdfDomain;
			}
		},
		methods: {
			// 申诉期限
			durationAppeal(datetime) {
				if (datetime) {
					const d = new Date(datetime);
					d.setDate(d.getDate() + 7)
					return dateFormat(d);
				} else {
					return ""
				}
			},
		},
		onLoad(e) {
			Object.keys(e).length && Object.assign(this.itemData, JSON.parse(e.param))
			// console.log(this.itemData);
			// this.$api.getAddress(this.itemData.occurAddr).then(res => {
			// 	this.itemData.occurAddr = res.data.regeocode.formatted_address || '-';
			// })
		}
	}
</script>

<style lang="scss" scoped>
	.appeal {
		padding: 30rpx;

		.appeal-result {
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 8rpx;
			box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);

			.result {
				position: absolute;
				right: 0;
				top: 0;
				border-radius: 0 16rpx 0 16rpx;
				color: #fff;
				line-height: 50rpx;
				padding: 0 16rpx;

				&[status='1'] {
					background: #EB5459;
				}

				&[status='2'] {
					background: #F2BA38;
				}

				&[status='3'] {
					background: #2EB10F;
				}
			}

			.label {
				font-weight: bold;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				border-bottom: 1px solid #EEEEEE;
			}

			.flex-item {
				font-size: 26rpx;
				line-height: 36rpx;
				padding: 20rpx;

				.title {
					color: #333;
				}

				.desc {
					padding-top: 10rpx;
					color: #666;
					text-align: justify;
				}
			}
		}

		.appeal-box {
			background: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
			border-radius: 8rpx;
			padding: 24rpx 30rpx;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.appeal-flex {
				display: flex;
				font-size: 26rpx;
				margin-top: 26rpx;
				line-height: 36rpx;

				.name {
					width: 6em;
					color: #666;
				}

				.text {
					flex: 1;
					color: #333;
				}
			}

			.textarea {
				width: 100%;
				background: #F2F2F2;
				border-radius: 8rpx;
				font-size: 26rpx;
				padding: 0.5em;
				line-height: 1.5em;
				height: 6em;
			}

			.appeal-btn {
				line-height: 88rpx;
				background: #FFD14A;
				border-radius: 23rpx;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				margin: 80rpx 0 20rpx
			}
		}

		.file-list {
			flex: 1;

			.file-item {
				float: left;
				width: 22%;
				text-align: center;
				height: 140rpx;
				line-height: 140rpx;
				margin-right: 4%;
				margin-bottom: 2%;
				position: relative;

				.file-img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}

				.file-del {
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(30%, -30%);
					border-radius: 50%;
					width: 0;
					height: 0;
					border: 20rpx solid #f00;

					&::after {
						content: "";
						width: 20rpx;
						display: block;
						transform: translate(-50%, -50%);
						background-color: #ffffff;
						height: 4rpx;
					}
				}

				&:nth-child(4n) {
					margin-right: 0;
				}

				&:nth-child(n+5) {
					margin-top: calc(4% / 3);
				}

			}

			.file-upload-btn {
				box-sizing: border-box;
				border: 1rpx solid #ddd;
				background: url('@/static/image/camera.png') no-repeat center;
				background-size: 70%;
			}
		}
	}
</style>